<template>
  <div>
    <el-row class="lock-btn" >
      <el-input v-model="queryParams.opName" style="width:250px;float: left;" clearable placeholder="请输入用户名/openId"></el-input>
      <el-input v-model="queryParams.deviceNo" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入设备编号"></el-input>
      <el-input v-model="queryParams.deviceName" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入设备名称"></el-input>
      <el-input v-model="queryParams.opContent" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入操作内容"></el-input>
      
      <el-select v-model="queryParams.actionType" placeholder="请选择操作类型" style="margin-left:5px;">
        <el-option v-for="(status,index) in statusOptions2" v-bind:key="index" :label="status" :value="index"></el-option>
      </el-select>
      <el-select v-model="queryParams.opType" placeholder="请选择操作来源" style="margin-left:5px;">
        <el-option v-for="(status,index) in statusOptions" v-bind:key="index" :label="status" :value="index"></el-option>
      </el-select>
      <br/>

     

    </el-row>
    <el-row>
        <el-col>
              <el-date-picker
                v-model="queryParams.opTimeStart"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 250px;"
                type="datetime"
                placeholder="请选择开始时间"
              ></el-date-picker>
    
        
              <el-date-picker
                v-model="queryParams.opTimeEnd"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 250px;"
                type="datetime"
                placeholder="请选择开始时间"
              ></el-date-picker>
             
    
      <el-button-group style="margin-left:5px;">
        <el-button size="medium" type="primary" @click="queryBtn" round>搜索</el-button>
      </el-button-group>

    </el-col>
    </el-row>
    <el-row style="margin-top:10px;box-shadow: rgb(205 205 205) 1px 1px 8px;">
      <el-col :span="24">
        <el-table :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row  ref="lcredepositrequestTable" v-loading="loading" :data="list" :stripe="true" :row-key="'id'" :max-height="clientHeight" :height="clientHeight" @selection-change="handleTableChange">
 
          <el-table-column prop="opName" label="openId/账号" width="280" sortable align="center">
          </el-table-column>
          <el-table-column prop="deviceNo" label="设备编号" width="150" sortable align="center">
          </el-table-column>
          <el-table-column prop="deviceName" label="设备名称" width="200" align="center">
          </el-table-column>
          <el-table-column prop="opContent" label="操作内容" width="" align="left">
          </el-table-column>
          <el-table-column prop="opTime" label="操作时间" width="180" align="center">
          </el-table-column>
         
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange">
        </el-pagination>
      </el-col>
    </el-row>






        
         

</div>
</template>

<script>
 
import { getNickName, getTestUserName,getRoleCode } from "../../util/auth";
import { oplogApi } from "../../api/oplog.js";

export default {
  name: "oplog",
  data: function () {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      labelWidth: "100px",
      loading: false,
      dialogTitle: "",
      pageNo: 1,
      pageSize:20,
      statusOptions:['一步运维','管理员运维平台','运营商管理平台'],
      statusOptions2:['设备操作','规格修改'],
      total: 0,
      multipleSelection: [],
      lcredepositrequests: [],
      form: {
        
      },
      roleCode:'',
      queryParams:{
        opName:'',
        deviceNo:'',
        deviceName:'',
        opContent:'',
        actionType:'',
        opType:'',
        opTimeStart:'',
        opTimeEnd:''
      },
      addDialog:false,
      parkfieldList: [],
      parkfieldId: '',
      status: '',

    };
  },
  methods: {
    editBtn (index, row) {
      let _this = this;
      _this.$nextTick(()=>{
        if(_this.$refs.form != undefined){
          _this.$refs.form.resetFields();
        }
      });
      _this.feeForm = row;
      _this.addDialog = true;
    },
    
    
    procRefund (index, row, status) {
      let _this = this;
      _this.loading = true;
      procRefundApi(row.id, status).then(resp => {
        console.log(resp)
        _this.loadAbnormalOrder(this.pageNo, this.pageSize);
        _this.$notify({
              title: "成功",
              message: "已处理",
              type: "success"
            });
      });
    },
    handlePageChange (pageSize) {
      this.pageSize = pageSize;
      this.loadAbnormalOrder(this.pageNo, this.pageSize);
    },
    handleNoChange (pageNo) {
      this.pageNo = pageNo;
      this.loadAbnormalOrder(this.pageNo, this.pageSize);
    },
    handleTableChange (val) {
      this.multipleSelection = val;
    },
    loadAbnormalOrder (pageNo, pageSize) {
      let _this = this;
      _this.loading = true;
      oplogApi({pageNo: pageNo,
        pageSize: pageSize,
        opName:_this.queryParams.opName,
        deviceNo:_this.queryParams.deviceNo,
        deviceName:_this.queryParams.deviceName,
        opContent:_this.queryParams.opContent,
        actionType:_this.queryParams.actionType,
        opType:_this.queryParams.opType,
        opTimeStart:_this.queryParams.opTimeStart,
        opTimeEnd:_this.queryParams.opTimeEnd,
        roleCode:_this.roleCode
      }).then(resp => {
          if (resp.errmsg === "ok") {
            console.log(resp.data.dataList);
            _this.total = resp.data.totalNum;
            _this.list = resp.data.dataList;
  
          }
          setTimeout(() => {
          _this.loading = false;
        }, 1 * 1000);
      });
    },

    queryBtn () {
      let _this = this;
      _this.loading = true;
      oplogApi({
        pageNo: _this.pageNo,
        pageSize: _this.pageSize,
        opName:_this.queryParams.opName,
        deviceNo:_this.queryParams.deviceNo,
        deviceName:_this.queryParams.deviceName,
        opContent:_this.queryParams.opContent,
        actionType:_this.queryParams.actionType,
        opType:_this.queryParams.opType,
        opTimeStart:_this.queryParams.opTimeStart,
        opTimeEnd:_this.queryParams.opTimeEnd,
        roleCode:_this.roleCode
      
      }).then(resp => {
        _this.lcredepositrequests = resp.data;
        _this.total = resp.data.totalNum;
        _this.list = resp.data.dataList;
        _this.loading = false;
      });
    }
  },
  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  mounted: function () {
    let _this = this;
    _this.roleCode = getRoleCode()
    this.$nextTick(function () {
      this.loadAbnormalOrder(_this.pageNo, _this.pageSize);
    });
  }
}
</script>

<style scoped>


.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}
</style>